<template>
    <div>
        <a href="https://juejin.cn/post/6970885478967050254" target="_blank">介绍</a>
        <a href="https://juejin.cn/post/6961801671189987359" target="_blank">animation transition transform</a>
        <div class="box">
        </div>
    </div>     
</template>
<script lang="ts" name="TransitionDemo" setup>
</script>
<style lang="scss" scoped>
.box {
    width: 50px;
    height: 50px;
    background-color: pink;
    transition-property: all;
    transition-duration: 0.8s;
}
// 伪元素 css控制的，通过其属性content指定
.box::after {
    content: "★";
    color: rgba(255, 255, 255, 0.8);
    width: inherit;
    height: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: 0.8s;
}

.box:hover {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: skyblue;
}

.box:hover::after {
    content: "♥";
    font-size: 100px;
}
</style>